import { resolve } from 'path';
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import JSX from '@vitejs/plugin-vue-jsx';
import styleImport from 'vite-plugin-style-import';

// https://zhuanlan.zhihu.com/p/399998544

const pathResolve = dir => resolve(process.cwd(), '.', dir);
const plugins = [
  vue(),
  JSX()
]

// https://vitejs.dev/config/
export default ({ command }) => {

  if (command !== 'serve') {
    plugins.push(
      // antd 组件按需加载
      // Components({
      //   resolvers: [AntDesignVueResolver()],
      // })
      styleImport({
        libs: [
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              // 这里是“子组件”列表，无需额外引入样式文件
              const ignoreList = [
                'typography-text',
                'typography-title',
                'typography-paragraph',
                'typography-link',
                'anchor-link',
                'sub-menu',
                'menu-item',
                'menu-item-group',
                'dropdown-button',
                'breadcrumb-item',
                'breadcrumb-separator',
                'input-password',
                'input-search',
                'input-group',
                'form-item',
                'radio-group',
                'checkbox-group',
                'layout-sider',
                'layout-content',
                'layout-footer',
                'layout-header',
                'step',
                'select-option',
                'select-opt-group',
                'card-grid',
                'card-meta',
                'collapse-panel',
                'descriptions-item',
                'list-item',
                'list-item-meta',
                'table-column',
                'table-column-group',
                'tab-pane',
                'tab-content',
                'timeline-item',
                'tree-node',
                'skeleton-input',
                'skeleton-avatar',
                'skeleton-title',
                'skeleton-paragraph',
                'skeleton-image',
                'skeleton-button',
              ];
              return ignoreList.includes(name) ? '' : `ant-design-vue/es/${name}/style/css`;
            },
          },
        ],
      })
    )
  }

  return {
    // vite build 后，用的是 type='module' 的形式加载打包后的 js，该形式不支持使用 file:/// 本地访问资源
    // 可以通过 http-server 启动本地服务器
    base: '/',
    resolve: {
      alias: [
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
      ],
    },
    // 注入全局变量
    define: {
      __APP_NAME__: JSON.stringify({ name: 'age' }) // 如果定义为了一个字符串常量，它需要被显式地引用
    },
    plugins,
    server: {
      // host: '',
      port: '1997',
      proxy: {
        '/proxy': {
          target: 'http://1.117.84.63:10023',
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/api/, '') // 重写
        }
      }
    },
    // build: {
    //   outDir: 'dist',
    //   assetsDir: 'build.outDir',
    //   assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求（0 禁止此项，不转换）
    //   cssCodeSplit: true, // 启用 css 代码拆分
    //   sourcemap: false, // 构建后是否生成 source map 文件。
    // },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "/@/styles/variables.scss";`
        }
      }
    },
    // jsx，setup 返回一个渲染函数，不要直接返回 dom
    // 这块，vue 官方建议使用 @vitejs/plugin-vue-jsx 插件
    esbuild: {
      // jsxFactory: 'h',
      // jsxFragment: 'Fragment',
      // jsxInject: "import { h } from 'vue';"
    }
  }
}
